<template>
  <nav class="navbar">
    <div class="leftMenu">
      <img src="../assets/logo.png" />
    </div>
    <div class="rightMenu"> 
      <span>{{store.user.username}}({{role}})</span>
      <img class="ml-5" style="height: 30px" src="@/assets/gita.gif" alt="" />
      <span class="line"></span>
      <span class="logout" @click="logout">退出登录</span>
      <div class="lang rel">
        <span class="text abs">cn</span>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref,computed } from 'vue';
import {useRouter} from 'vue-router';
import { useStore } from '../pinia/login';
const router = useRouter();
const store = useStore();
 
 const role = computed(() => {
   let obj = {
     1: '超级管理员',
     2: '普通管理员',
     3: '普通用户'
   }
   return obj[store.user.type]
 })

 const logout = () => {
   localStorage.clear();
   router.push('/login')
 }
</script>

<style scoped lang="less">
@import './Navbar.less';
</style>
